<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="index.css">
    <script src="../jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="banner">
        <div class="pic">
            <ul>
                <li style="z-index: 2;">
                    <a href="#">
                        <img src="https://img1.baidu.com/it/u=943577751,2323580209&fm=26&fmt=auto" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://img0.baidu.com/it/u=1811714724,3558705389&fm=26&fmt=auto" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://img0.baidu.com/it/u=4010067771,3351237309&fm=26&fmt=auto" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://img0.baidu.com/it/u=2281352250,2055844811&fm=26&fmt=auto" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://img0.baidu.com/it/u=1009148603,472872114&fm=26&fmt=auto" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="https://img1.baidu.com/it/u=2528949027,1104335733&fm=26&fmt=auto" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab">
            <ul>
                <li class="active">
                    <div class="on"></div>
                    <a href="#">国际</a>
                </li>
                <li>
                    <div></div>
                    <a href="#">焦点</a>
                </li>
                <li>
                    <div></div>
                    <a href="#">社会</a>
                </li>
                <li>
                    <div></div>
                    <a href="#">热点</a>
                </li>
                <li>
                    <div></div>
                    <a href="#">娱乐</a>
                </li>
                <li>
                    <div></div>
                    <a href="#">奇闻</a>
                </li>
            </ul>
        </div>
    </div>
    <script>
        $(function() {
            let index = 0;
            let len = $(".pic>ul>li").length;
            $(".tab>ul>li").on("mouseenter", function() {
                index = $(this).index();
                $(this).addClass("active").siblings().removeClass("active");
                $(this).find("div").addClass("on");
                $(this).siblings().find("div").removeClass("on");
                $(".pic>ul>li").eq(index).fadeIn().siblings().fadeOut();
            })


            let s = setInterval(auto, 1000);
            $(".pic>ul>li").on("mouseenter", function() {
                clearInterval(s);
            })
            $(".pic>ul>li").on("mouseleave", function() {
                s = setInterval(auto, 1000);
            })

            function auto() {
                index++;
                if (index == len) {
                    index = 0;
                }
                $(".tab>ul>li").eq(index).addClass("active").siblings().removeClass("active");
                $(".tab>ul>li").eq(index).find("div").addClass("on");
                $(".tab>ul>li").eq(index).siblings().find("div").removeClass("on");
                $(".pic>ul>li").eq(index).fadeIn().siblings().fadeOut();
            }

        })
    </script>
</body>

</html>